<!-- 左侧列表下拉菜单模板 -->
<template>
  <div class="template-body" :style="[{ height: contentHeight }]">
    <section class="left-side">
      <leftAsideList
        :propsData="propsData"
        :dataList="dataList"
        ref="leftAsideList"
        @leftNavChange="leftNavChange"
      ></leftAsideList>
    </section>
    <section
      :class="[
        'template-content',
        showContentMask ? 'no-scroll' : '',
        addBorderTopLeft() ? 'addBorderTopLeft' : ''
      ]"
    >
      <div class="ad-box">
        <classifyAd :propsData="propsData"></classifyAd>
      </div>
      <dropDownMenu
        :propsData="propsData"
        :menuList="menuList"
        ref="dropDownMenu"
        @showMenuBg="showMenuBg"
        @closeMenuBg="closeMenuBg"
        @changeMenu="changeMenu"
        :currentId="currentId"
      ></dropDownMenu>
      <div
        class="content-mask"
        @click="handleMask"
        v-if="showContentMask"
      ></div>
      <section class="goods-section">
        <scroll-view
          class="scroll-box"
          scroll-y="true"
          @scrolltolower="scrollToBottom"
        >
          <goodsList :propsData="propsData" :goodsList="goodsList"></goodsList>
        </scroll-view>
      </section>
    </section>
  </div>
</template>

<script>
import leftAsideList from "../components/leftAsideList/index.vue";
import classifyAd from "../components/classifyAd/index.vue";
import dropDownMenu from "../components/dropDownMenu/index.vue";
import goodsList from "../components/goodsList/index.vue";
import { mapGetters } from "vuex";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {}
    },
    contentHeight: {
      type: String,
      default: ""
    },
    catList: {
      type: Array,
      default: []
    }
  },
  mixins: [],
  components: { leftAsideList, classifyAd, goodsList, dropDownMenu },
  data() {
    return {
      showContentMask: false,
      dataList: [],
      menuList: [],
      goodsList: [],
      page: 1,
      totalCount: 0,
      currentId: 0
    };
  },
  mounted() {
    this.initData();
  },
  watch: {},
  computed: {
    ...mapGetters(["getGoCatId"]),
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    showModule() {
      return this.propsData.params.showModule;
    }
    // scrollBoxHeight() {
    //   let scrollH = "";
    //   if (this.showModule) {
    //     let outH = parseInt(this.contentHeight) - 38 - 77 - 6;
    //     scrollH = `calc(100% - 8vw - 38px -77px -6px)`;
    //   } else {
    //     let outH = parseInt(this.contentHeight) - 38 - 6;
    //     scrollH = `calc(100% - 2.13vw - 38px - 6px)`;
    //   }
    //   return scrollH;
    // },
  },
  methods: {
    addBorderTopLeft() {
      this.$nextTick(() => {
        return this.$refs.leftAsideList.activeTab != 0;
      });
    },
    initData() {
      try {
        if (this.styleType != 3) {
          this.dataList = this.catList;
        } else {
          this.dataList = this.catList[0].list;
        }
        this.menuList = this.dataList[0].list;
        this.getGoodsList(this.menuList[0].id);
      } catch (err) {
        new Error(err);
      }
    },
    showMenuBg(e) {
      this.showContentMask = true;
    },
    closeMenuBg() {
      this.showContentMask = false;
    },
    leftNavChange(e) {
      let _id;
      if (e?.list) {
        this.menuList = e.list;
      } else {
        try {
          this.menuList = this.dataList.find((el) => el.id === e.id).list;
          _id = e.id;

          let item = this.menuList.find((el) => el.id === this.getGoCatId),
            index = this.menuList.findIndex((el) => el.id === this.getGoCatId);
          this.$nextTick(() => {
            this.$refs.dropDownMenu.handleMenuItem(item, index);
          });
        } catch (error) {}
        return;
      }

      if (this.menuList.length) {
        this.getGoodsList(_id || this.menuList[0].id);
      } else {
        this.goodsList = [];
      }
    },
    handleMask() {
      this.showContentMask = false;
      this.$refs.dropDownMenu.showMenuInfo = false;
    },
    changeMenu(e) {
      let id = e.id;
      this.goodsList = [];
      this.page = 1;
      this.getGoodsList(id);
    },
    getGoodsList(id, isLoad = false) {
      this.currentId = id;
      this.$allrequest.classification
        .goodsList(
          {
            cat_id: id,
            page: this.page,
            limit: 10
          },
          true
        )
        .then((res) => {
          if (!res.code) {
            if (isLoad) {
              this.goodsList = [...this.goodsList, ...res.data.list];
            } else {
              this.goodsList = res.data.list;
            }
            this.totalCount = res.data.row_count;
          }
        });
    },
    scrollToBottom() {
      if (this.page * 10 >= this.totalCount) return;
      this.page++;
      this.getGoodsList(this.currentId, true);
    }
  }
};
</script>

<style lang="scss" scoped>
.template-body {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  padding-top: 12rpx;
  .left-side {
    width: 26.93%;
    background: #f2f2f2;
    height: 100%;
  }
  .template-content {
    width: 73.06%;
    height: 100%;
    background: #ffffff;
    position: relative;
    display: flex;
    flex-direction: column;
    .ad-box {
      width: 100%;
      background: #ffffff;
      position: relative;
      z-index: 20;
    }
    .goods-section {
      width: 100%;
      flex: auto;
      height: 0;
      .scroll-box {
        width: 100%;
        padding: 0 4.267vw;
        height: 100%;
      }
      .scroll-box::-webkit-scrollbar {
        display: none;
      }
    }
    .goods-section::-webkit-scrollbar {
      display: none;
    }
    .content-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 11;
      background-color: #000000;
      opacity: 0.5;
    }
  }
  .no-scroll {
    overflow: hidden;
  }
  .addBorderTopLeft {
    border-radius: 20rpx 0 0 0;
  }
  .template-content::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
scroll-view ::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}
</style>
